<template>
	
	<div class="play">
		<audio controls autoplay @timeupdate="timeUpdate"
			:src="`https://music.163.com/song/media/outer/url?id=${music.id}.mp3`" ref="player" @ended="ended"></audio>
		<div class="miniplay">
			<div class="pic" @click="showFull"><img :style="{animationPlayState:playstate?'running':'paused'}"
					:src="music.picUrl||music.al.picUrl" @click="showFull"></div>
			<div class="namemask" @click="showFull">
				<div class="name" :style="{animationPlayState:playstate?'running':'paused'}" @click="showFull">
					<i class="thide">正在播放:{{music.name}}</i>
					<i class="thide">{{music.song.artists[0].name}}</i>
				</div>
			</div>
			<div class="btn" @click="changePlayState">
				<canvas width="40" height="40" ref="playbtn"></canvas>
				<i :class="['fa',playstate?'fa-pause':'fa-play']"></i>
			</div>
		</div>
		<transition enter-active-class="animate__animated animate__slideInUp"
			leave-active-class="animate__animated animate__slideOutDown">
			<div class="fullscreen" v-if="fullscreen">
				<full-screen 
					:music="music" 
					@hidefull="fullscreen=$event" 
					:playstate="playstate"
					:currentTime="currentTime" 
					:totalTime="totalTime" 
					@changetime="changeTime"
					@playorpaused="changePlayState" 
					:playCollect="playCollect"
					@changemusic="$emit('changemusic',$event)" 
					@changecircle="changecircle" 
					:cirlceMode="cirlceMode"
					@play="$emit('play',$event)">
				</full-screen>

			</div>
		</transition>
	</div>
	
</template>

<script>
	import FullScreen from './FullScreen.vue'
	export default {
		components: {
			FullScreen
		},
		props: {
			music: Object,
			playCollect: Array,
			cirlceMode: String
		},
		data() {
			return {
				playbtn: null,
				playstate: true, //true播放，false暂停
				fullscreen: false,
				currentTime: 0, //当前音乐播放时间
				totalTime: 0, //当前音乐的总时长
			}
		},
		created() {

		},
		mounted() {
			this.playbtn = this.$refs.playbtn;
		},
		methods: {
			timeUpdate(event) {
				let currentTime = event.target.currentTime;
				this.currentTime = currentTime; //当前播放的时间.
				let totalTime = event.target.duration;
				this.totalTime = totalTime;
				this.drawCircle(currentTime, totalTime);
			},
			drawCircle(c, t) {
				let cxt = this.playbtn.getContext("2d");
				cxt.clearRect(0, 0, 60, 60); //清除画布
				//绘制一个圆形.
				cxt.beginPath();
				cxt.strokeStyle = "#555";
				cxt.lineWidth = 2;
				cxt.arc(20, 20, 15, 0, 2 * Math.PI); // 0-2π
				cxt.stroke();
				cxt.closePath();
				//绘制播放的进度
				cxt.beginPath();
				cxt.strokeStyle = "white";
				cxt.arc(20, 20, 15, 0, 2 * Math.PI * (c / t)); //当前时间/总时长. * 2π
				cxt.stroke();
				cxt.closePath();
			},
			changePlayState() { //切换播放暂停状态
				this.playstate = !this.playstate;
				let player = this.$refs.player;
				if (this.playstate) {
					player.play(); //播放
				} else {
					player.pause(); //暂停
				}
			},
			showFull() {
				this.fullscreen = true;
			},
			changeTime(ctime) { //修改播放时间
				this.$refs.player.currentTime = ctime;
			},
			ended() {
				// console.log("播放结束.");
				this.$emit("changemusic", 2); //播放完成后播放下一曲.
				this.$refs.player.currentTime = 0; //时间归0
				this.$refs.player.play(); //继续播放
			},
			changecircle(event) { //修改循环播放模式 
				this.$emit("changecircle", event);
			}
		},
		watch: {
			music() {
				this.playstate = true;
			}
		}

	}
</script>

<style lang="less" scoped>

	.play {
		background-color: #999;
		width: 100%;
		position: fixed;
		bottom: -1px;
		color: white;
		z-index: 999;
		height: 60px;

		audio {
			display: none;
		}
		.miniplay {
			display: flex;
			height: 60px;
			align-items: center;

			.pic {
				width: 50px;
				height: 50px;
				margin-left: 10px;

				img {
					width: 50px;
					height: 50px;
					border-radius: 50%;
					overflow: hidden;
					animation: round 5s linear infinite;
				}
			}


			.namemask {
                display: flex;
                flex-direction: column;
                padding: 6px 0px ;
                flex: 1 1 auto;
                width: 0px;
                padding-left: 10px;
                
                
				.name {
                    &>i{
                        display: block;
                    }
                    .thide{
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        word-break: normal;
                    }
				}


			}

			.btn {
				// margin: 0 10px;
				width: 40px;
				// height: 40px;
				position: relative;
                display: flex;
                align-items: center;
                padding: 0 10px;

				i {
					&.fa {
						position: absolute;
						color: white;
						left: 50%;
						top: 50%;
						font-size: 15px;
						transform: translate(-43%, -43%);
					}
				}
			}
		}

		.fullscreen {
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			overflow: hidden;
			background: #333;
			z-index: 10;


		}
	}

	@keyframes round {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}
</style>
